<template>
  <CollapseContainer class="w-full h-32 mt-5 bg-white rounded-md" title="模态消息">
    <a-popconfirm
      title="确定删除么?"
      ok-text="确认"
      cancel-text="删除"
      @confirm="confirm"
      @cancel="cancel"
      placement="topRight"
      class="ml-5 mt-5"
    >
      <a href="#">基本用法</a>
    </a-popconfirm>

    <a-popconfirm
      title="确定删除么?"
      ok-text="确认"
      cancel-text="删除"
      @confirm="confirm"
      @cancel="cancel"
      placement="bottomLeft"
      class="ml-5 mt-5"
    >
      <template #icon><question-circle-outlined style="color: red" /></template>

      <a href="#">自定义图标</a>
    </a-popconfirm>

    <a-popconfirm
      title="确定删除么?"
      ok-text="确认"
      cancel-text="删除"
      @confirm="confirm"
      @cancel="cancel"
      class="ml-5 mt-5"
      :open="isShow"
    >
      <template #icon><question-circle-outlined style="color: red" /></template>

      <a href="#">条件控制</a>
    </a-popconfirm>
    <a-checkbox v-model:checked="isShow" class="ml-2" />

    <div class="w-full bg-white rounded-md">
      <ol class="ml-5 mt-5 pb-3">
        <li class="mt-2">vben 对气泡框并未进行封装,需要使用原生的 ant 方式 </li>
        <li class="mt-2"
          >placement 设置气泡方向，共有12个方向: 上[topLeft, top, topRight],下[bottomLeft, bottom,
          bottomRight], 左[leftTop, left, leftBottom], 右[rightTop, right, rightBottom]
        </li>
        <li class="mt-2">默认点击展示，可进行条件展示</li>
        <li class="mt-2">
          <a href="https://www.antdv.com/components/popconfirm-cn">ant popconfirm 官方文档</a>
        </li>
      </ol>
    </div>

    <CollapseContainer class="w-full bg-white rounded-md mt-5" title="源码-基本用法">
      <markdown-viewer :value="getBasicDoc()" />
    </CollapseContainer>

    <CollapseContainer class="w-full bg-white rounded-md mt-5" title="源码-自定义图标">
      <markdown-viewer :value="getCustomIconDoc()" />
    </CollapseContainer>

    <CollapseContainer class="w-full bg-white rounded-md mt-5" title="源码-条件控制">
      <markdown-viewer :value="getConditionDoc()" />
    </CollapseContainer>
  </CollapseContainer>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { useMessage } from '@/hooks/web/useMessage';

  // 导入 ant 气泡确认框
  import { Popconfirm as aPopconfirm, Checkbox as aCheckbox } from 'ant-design-vue';
  // 导入自定义图标
  import { QuestionCircleOutlined } from '@ant-design/icons-vue';

  const { info } = useMessage().createMessage;
  let isShow = ref<boolean>(false);

  // 自定义取消方法
  function cancel() {
    info('点击了取消');
  }
  // 自定义确定方法
  function confirm() {
    info('点击了确定');
  }
</script>

<script lang="ts">
  function getBasicDoc() {
    return `
\`\`\`html
<a-popconfirm
  title="确定删除么?"
  ok-text="确认"
  cancel-text="删除"
  @confirm="confirm"
  @cancel="cancel"
  placement="topRight"
  class="ml-5 mt-5"
>
  <a href="#">基本用法</a>
</a-popconfirm>
\`\`\`

\`\`\`typescript
// 导入 ant 气泡确认框
  import { Popconfirm as aPopconfirm} from 'ant-design-vue';

  const { info } = useMessage().createMessage;
  let isShow = ref<boolean>(false);

  // 自定义取消方法
  function cancel() {
    info('点击了取消');
  }
  // 自定义确定方法
  function confirm() {
    info('点击了确定');
  }
\`\`\`
`;
  }

  function getCustomIconDoc() {
    return `
\`\`\`html
<a-popconfirm
  title="确定删除么?"
  ok-text="确认"
  cancel-text="删除"
  @confirm="confirm"
  @cancel="cancel"
  placement="bottomLeft"
  class="ml-5 mt-5"
>
  <template #icon><question-circle-outlined style="color: red" /></template>

  <a href="#">自定义图标</a>
</a-popconfirm>

\`\`\`

\`\`\`typescript
  // 导入 ant 气泡确认框
  import { Popconfirm as aPopconfirm} from 'ant-design-vue';

  const { info } = useMessage().createMessage;

  // 自定义取消方法
  function cancel() {
    info('点击了取消');
  }
  // 自定义确定方法
  function confirm() {
    info('点击了确定');
  }
\`\`\`
`;
  }

  function getConditionDoc() {
    return `
\`\`\`html
<a-popconfirm
  title="确定删除么?"
  ok-text="确认"
  cancel-text="删除"
  @confirm="confirm"
  @cancel="cancel"
  class="ml-5 mt-5"
  :open="isShow"
>
  <template #icon><question-circle-outlined style="color: red" /></template>

  <a href="#">条件控制</a>
</a-popconfirm>
<a-checkbox v-model:checked="isShow" class="ml-2" />
\`\`\`

\`\`\`typescript
  import { ref } from 'vue';
  // 导入 ant 气泡确认框
  import { Popconfirm as aPopconfirm, Checkbox as aCheckbox } from 'ant-design-vue';

  // 定义变量
  let isShow = ref<boolean>(false);
  const { info } = useMessage().createMessage;

  // 自定义取消方法
  function cancel() {
    info('点击了取消');
  }
  // 自定义确定方法
  function confirm() {
    info('点击了确定');
  }
\`\`\`
`;
  }
</script>
